<template>
	<view class="write-detail">
		<view class="special-content">
			<view class="date-box">
				<view class="week">
					<text class="day">{{ detailData.day }}</text>
					<text class="weekday">{{ detailData.weekday }}</text>
				</view>
				<view class="date">{{ detailData.year }}.{{ detailData.month }}</view>
			</view>
			<view class="title-box">
				<view class="title cut_font">{{ detailData.homeworkName }}</view>
				<view class="title-des cut_font">{{ detailData.homeworkDescription }}</view>
			</view>
		</view>
		<view class="write-content">
			<view class="title">{{ detailData.title }}</view>
			<view class="time">{{ detailData.time }}</view>
			<!-- <view class="content">{{ detailData.content }}</view> -->
			<view class="content">
				<view
				  v-for="(d, i) in String(detailData.content || '-').split(/\n/ig)"
				  class="line"
				  :key="i">
				  <text v-if="d">{{ d }}</text>
				  <br v-else>
				</view>
			</view>
			<view class="images" v-if="detailData.attList && detailData.attList.length">
				<image
					class="image"
					v-for="(image, index) in detailData.attList"
					:key="index"
					:src="image.attachment"
					mode="widthFix">
				</image>
			</view>
		</view>
		<view class="reply-box" v-if="detailData.comment">
			<image class="avatar" src="../../static/replyer.png" mode=""></image>
			<view class="reply-content">
				<view class="title">{{ detailData.commenter || '咨询师' }}回复</view>
				<view class="content">{{ detailData.comment }}</view>
			</view>
		</view>
		<view class="write-footer">
			<view class="button-list" v-if="detailType === 'view'">
				<image
					src="../../static/share-icon.png"
					mode=""
					@click="detailType = 'share'">
				</image>
				<image
					src="../../static/delete-icon.png"
					mode=""
					@click="handlerDelete">
				</image>
			</view>
			<view class="button-list" v-else-if="detailType === 'share'">
				<button v-if="isInWeixinMiniProgram" type="primary" @click="handlerSkipToMiniProgram('share')">分享给朋友</button>
				<button v-if="isInWeixinMiniProgram" type="primary" @click="handlerSkipToMiniProgram('save')">保存到相册</button>
				<button v-if="!isInWeixinMiniProgram" type="primary" @click="handlerSkipToSharePage('save')">生成海报</button>
			</view>
		</view>
	</view>
</template>

<script>
const wx = require('jweixin-module');

export default {
	data() {
		return {
			isInWeixinMiniProgram: false,
			detailId: null,
			// 'view' or 'share'
			detailType: 'view',
			detailData: {},
			// 跳转来源 anxious: 焦虑树洞
			source: '',
		};
	},
	onLoad({ type, detailId, source }) {
		this.detailId = detailId;
		this.detailType = type || 'view';
		this.source = source || '';
		this.getDetailData();
		this.getEnvironment();
	},
	methods: {
		getEnvironment() {
			wx.miniProgram.getEnv((res) => {
				this.isInWeixinMiniProgram = !!res.miniprogram;
			});
		},
		getDetailData() {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			uni.$request({
				method: 'GET',
				url: 'app-api/homework/write/get',
				data: {
					id: this.detailId,
				},
				header: { 'tenant-id': 1 },
			}).then((res) => {
				const data = res?.data || {};
				this.detailData = { ...data, ...(this.getTimesByTimeStamp(data.createTime) || {}) };
			}).finally(uni.hideLoading);
		},
		handlerDelete() {
			uni.showModal({
				title: '提示',
				content: '确定要删除本条书写记录?\n删除后将无法找回',
				cancelColor: '#FF8F1F',
				confirmColor: '#000000',
				success: ({ confirm }) => {
					if (confirm) this.handlerConfirm();
				},
			});
		},
		handlerConfirm() {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			uni.$request({
				method: 'DELETE',
				url: `app-api/homework/write/delete?id=${this.detailId}`,
				header: { 'tenant-id': 1 },
			}).then(() => {
				uni.showToast({
					duration: 2000,
					title: '删除成功',
				});
				uni.$emit('delete-success');
				
				if (this.source === 'anxious') {
					window.history.go(-1);
				} else {
					uni.navigateBack();
				}
				
			}).finally(uni.hideLoading);
		},
		handlerSkipToMiniProgram(type) {
			const path = '/pages/home/webviewPage/detailShare';
			this.handlerShare(wx.miniProgram, type, path);
		},
		handlerSkipToSharePage(type) {
			const path = '/pages/write/detail-share';
			this.handlerShare(uni, type, path);
		},
		handlerShare(e, type, path) {
			const dom = uni.createSelectorQuery().select('.write-content');
			dom.boundingClientRect((data) => {
				const canvasWidth = data.left + data.right;
				const canvasHeight = data.height + 10;
				e.navigateTo({
					url: `${path}?type=${type}&canvasWidth=${canvasWidth}&canvasHeight=${canvasHeight}&id=${this.detailId}`,
				});
			}).exec();
		},
		getTimesByTimeStamp(timeStamp) {
		   const date = new Date(timeStamp);
		   const format = s => `0${s || 0}`.slice(-2);
		   const year = date.getFullYear();
		   const month = format(date.getMonth() + 1);
		   const day = format(date.getDate());
		   const weekday = ({
			   0: '周日',
			   1: '周一',
			   2: '周二',
			   3: '周三',
			   4: '周四',
			   5: '周五',
			   6: '周六',
		   })[date.getDay()];
		   const time = `${format(date.getHours())}:${format(date.getMinutes())}`;
		   return { year, month, day, weekday, time };
		},
	},
	
};
</script>

<style lang="scss">
	.write-detail {
		padding: 30rpx 54rpx 230rpx 54rpx;
		font-family: Gen Jyuu Gothic-Regular, Gen Jyuu Gothic;
		font-weight: 400;
		.special-content {
			display: flex;
			.date-box {
				width: 140rpx;
				min-width: 140rpx;
				// margin: auto 0;
				color: #303030;
				font-size: 26rpx;
				.week {
					.day {
						font-size: 36rpx;
						margin-right: 10rpx;
					}
					.weekday {
						
					}
				}
				.date {
					margin-top: 10rpx;
				}
			}
			.title-box {
				width: calc(100% - 140rpx);
				margin-top: 3rpx;
				.title {
					font-size: 32rpx;
					color: #303030;
					line-height: 48rpx;
					margin-bottom: 6rpx;
				}
				.title-des {
					font-size: 28rpx;
					color: #666666;
					line-height: 42rpx;
				}
			}
		}
		.write-content {
			margin-top: 52rpx;
			.title {
				font-size: 40rpx;
				color: #333333;
				line-height: 56rpx;
			}
			.time {
				font-size: 24rpx;
				color: #ABB3BB;
				line-height: 40rpx;
			}
			.content {
				margin: 36rpx 0 50rpx 0;
				.line {
					margin-top: 10rpx;
					// text-indent: 2em;
				}
				.line:nth-child(1) {
					margin-top: 0;
					// text-indent: 0;
				}
			}
			.images {
				.image {
					width: 100%;
				}
			}
		}
		.reply-box {
			display: flex;
			margin-top: 60rpx;
			.avatar {
				width: 100rpx;
				height: 100rpx;
				// margin: auto 0;
				margin-right: 60rpx;
			}
			.reply-content {
				width: calc(100% - 154rpx);
				font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
				.title {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 36rpx;
				}
				.content {
					margin-top: 30rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #646464;
					line-height: 36rpx;
				}
			}
		}
		.write-footer {
			width: 100%;
			height: 160rpx;
			box-shadow: 0px -5px 7px 0px rgba(215.7336974143982,215.7336974143982,215.7336974143982,0.5);
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			.button-list {
				display: flex;
				justify-content: center;
				height: 100%;
				button {
					width: 280rpx;
					height: 68rpx;
					line-height: 68rpx;
					background: #FF8151;
					font-size: 28rpx;
					font-family: Nunito Sans-SemiBold, Nunito Sans;
					font-weight: 600;
					color: #FFFFFF;
					margin: auto 31rpx;
					text-align: center;
					border-radius: 50rpx;
				}
				image {
					width: 39rpx;
					height: 42rpx;
					margin: auto 75rpx;
				}
			}
		}
	}
</style>
